<template>
	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
		<div class="widgets-content">
			<div class="widgets" ref="widgets">
				<div class="widgets-wrapper" style="width: 100%;height: 100%;">
					<el-row class="card-row" style="height: 25%;">
						<!--						 :span="15"-->
						<el-col :xs="24" :sm="24"  class="el-card-col">
							<el-card shadow="hover" class="el-card-row">
								<template #header>
									<div class="card-header">
										<span>常用快捷入口</span>
									</div>
								</template>
								<div class="oneBox">
									<div class="box" @click="tap(item)" v-for="(item,index) in menu" :key="index">
										<img v-if="item.stat_image" :src="item.stat_image">
										<img v-else src="img/icon8.png">
										<div>
											{{ item.title }}
										</div>
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
					<el-row class="card-row" style="height: 40%;">
						<el-card shadow="hover" class="el-card-row" style="width: 99.7%;">
							<template #header>
								<div class="card-header">
									<span>七日生产入库产量图</span>
								</div>
							</template>
							<div style="height: 330px;">
								<scEcharts height="300px" :option="option"></scEcharts>
							</div>
						</el-card>
					</el-row>
					<el-row class="card-row" >
						<el-card shadow="hover" class="el-card-row" style="width: 99.7%;">
							<template #header>
								<div class="card-header">
									<span>生产进度图</span>
								</div>
							</template>
							<div>
								<el-table
									:data="tableData"
									style="width: 100%;"
									stripe>
									<el-table-column prop="order_no" label="序号"></el-table-column>
									<el-table-column prop="order_no" label="单据编号"></el-table-column>
									<el-table-column prop="order_no" label="单据日期"></el-table-column>
									<el-table-column prop="order_no" label="审核状态"></el-table-column>
									<el-table-column prop="order_no" label="完工状态"></el-table-column>
									<el-table-column prop="order_no" label="产品编码"></el-table-column>
									<el-table-column prop="order_no" label="产品名称"></el-table-column>
									<el-table-column prop="order_no" label="开工日期"></el-table-column>
									<el-table-column prop="order_no" label="计划完工日期"></el-table-column>
									<el-table-column prop="order_no" label="规格型号"></el-table-column>
									<el-table-column prop="order_no" label="单位"></el-table-column>
									<el-table-column prop="order_no" label="数量"></el-table-column>
									<el-table-column prop="order_no" label="产品类别"></el-table-column>
									<el-table-column prop="order_no" label="辅助属性"></el-table-column>
									<el-table-column prop="order_no" label="客户"></el-table-column>
									<el-table-column prop="order_no" label="生产批号"></el-table-column>
									<el-table-column prop="order_no" label="基本单位数量"></el-table-column>
									<el-table-column prop="order_no" label="辅助单位"></el-table-column>
									<el-table-column prop="order_no" label="实际完工日期"></el-table-column>
									<el-table-column prop="order_no" label="完工数量"></el-table-column>
									<el-table-column prop="order_no" label="基本单位完工数量"></el-table-column>
									<el-table-column prop="order_no" label="辅助单位完工数量"></el-table-column>
									<el-table-column prop="order_no" label="生产进度(%)"></el-table-column>
									<el-table-column prop="order_no" label="部门"></el-table-column>
									<el-table-column prop="order_no" label="已领料数量"></el-table-column>
									<el-table-column prop="order_no" label="已领料基本单位数量"></el-table-column>
									<el-table-column prop="order_no" label="生产类型"></el-table-column>
									<el-table-column prop="order_no" label="生产分类"></el-table-column>
									<el-table-column prop="order_no" label="BOM版本号"></el-table-column>
									<el-table-column prop="order_no" label="BOM简称"></el-table-column>
									<el-table-column prop="order_no" label="工艺路线"></el-table-column>
									<el-table-column prop="order_no" label="检验关联数量"></el-table-column>
									<el-table-column prop="order_no" label="合格数量"></el-table-column>
									<el-table-column prop="order_no" label="不合格数量"></el-table-column>
									<el-table-column prop="order_no" label="返修数量"></el-table-column>
									<el-table-column prop="order_no" label="备注"></el-table-column>
									<el-table-column prop="order_no" label="分录行号"></el-table-column>
									<el-table-column prop="order_no" label="物料代码"></el-table-column>
									<el-table-column prop="order_no" label="物料名称"></el-table-column>
									<el-table-column prop="order_no" label="物料规格型号"></el-table-column>
									<el-table-column prop="order_no" label="物料类别"></el-table-column>
									<el-table-column prop="order_no" label="辅助属性"></el-table-column>
									<el-table-column prop="order_no" label="子单位"></el-table-column>
									<el-table-column prop="order_no" label="子基本单位"></el-table-column>
									<el-table-column prop="order_no" label="标准用量"></el-table-column>
									<el-table-column prop="order_no" label="基本单位标准用量"></el-table-column>
									<el-table-column prop="order_no" label="损耗率(%)"></el-table-column>
									<el-table-column prop="order_no" label="计划用量"></el-table-column>
									<el-table-column prop="order_no" label="计划单位标准用量"></el-table-column>
									<el-table-column prop="order_no" label="仓库"></el-table-column>
									<el-table-column prop="order_no" label="实际领料数量"></el-table-column>
									<el-table-column prop="order_no" label="基本单位实际领料数量"></el-table-column>
									<el-table-column prop="order_no" label="备注"></el-table-column>
								</el-table>
							</div>
						</el-card>
					</el-row>
					<el-row class="card-row">
						<el-card shadow="hover" class="el-card-row" style="width: 99.7%;">
							<template #header>
								<div class="card-header">
									<span style="margin-right: 20px;">生产概况</span>
									<el-radio-group v-model="radio1">
										<el-radio-button label="全部"></el-radio-button>
										<el-radio-button label="本月"></el-radio-button>
									</el-radio-group>
								</div>
							</template>
							<div style="display: flex;align-items: center;">
								<div class="box1">
									<div>
										<div class="value">
											{{ formData.today }}
										</div>
										<div class="title">工单数量</div>
									</div>
								</div>
								<div class="box1">
									<div>
										<div class="value">
											{{ formData.today }}
										</div>
										<div class="title">计划数量</div>
									</div>
								</div>
								<div class="box1">
									<div>
										<div class="value" style="color: #01a066">
											{{ formData.today }}
										</div>
										<div class="title">完成数量</div>
									</div>
								</div>
								<div class="box1">
									<div>
										<div class="value" style="color: red">
											{{ formData.today }}
										</div>
										<div class="title">超期未完成</div>
									</div>
								</div>
							</div>
						</el-card>
					</el-row>
					<el-row class="card-row">
						<el-card shadow="hover" class="el-card-row" style="width: 99.7%;">
							<template #header>
								<div class="card-header">
									<span>设备状态</span>
								</div>
							</template>
						</el-card>
					</el-row>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
import scEcharts from "@/components/scEcharts/index.vue";
export default {
	components: {
		scEcharts,
	},
	data() {
		return {
			dialog:{
				notice:false
			},
			customizing: false,
			selectLayout: [],
			announcementList:[],
			list:[],
			list1:[],
			tableData: [{order_no:1},{order_no:2}],
			menu:[
				{
					title:'物料',
					stat_image:'img/icon1.png'
				},
				{
					title:'工序',
					stat_image:'img/icon2.png'
				},
				{
					title:'工艺路线',
					stat_image:'img/icon3.png'
				},
				{
					title:'生产工单',
					stat_image:'img/icon4.png'
				},
				{
					title:'工序计划单',
					stat_image:'img/icon5.png'
				},
				{
					title:'生产入库单',
					stat_image:'img/icon6.png'
				}
			],
			option: {
				grid: {
					top: "80px",
				},
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {},
				xAxis: {
					type: "category",
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
				},
				yAxis: {
					type: "value",
				},
				series: [
					{
						name: '数据1',
						data: [120, 200, 150, 80, 70, 110, 130],
						type: "bar",
						barWidth: "40px",
					},
					{
						name: '数据2',
						data: [110, 180, 120, 120, 60, 90, 110],
						type: "bar",
						barWidth: "40px",
					},
				],
			},
			formData:{today:10},
			radio1: '全部',
		}
	},
	created() {

	},
	mounted() {

	},
	computed: {
	},
	methods: {
		// 根据不同路由跳转不同页面
		async getData() {
			let refData = {
				yu:this.isMobile()?1:2
			}
			var res = await this.$API.home.home.list.get(refData);
			this.menu = res.data.menu
			this.list1 = res.data.sales_send_apply
			this.list =  res.data.purchase_apply
			this.tableData = res.data.today_produce
		},
		/**查看按钮点击*/
		table_show(row,text) {
			if(text == '通知消息') {
				this.dialog.notice = true
				this.$nextTick(() => {
					this.$refs.saveNoticeDialog.open('show').setData(row)
				})
			}
		},
		// 判断是否是手机端，如果是，返回true
		isMobile () {
			let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
			return flag
		},
		sweepClick() {
			this.$router.push("/sweep");
			// this.$router.push("/sweepDetails");
		},
		tap(text) {
			if(text == '通知消息') {
				this.$router.push("/announcement/list");
			} else if(text == '生产记录') {
				this.$router.push("/production/equipmentProduction");
			} else if(text == '设备管理') {
				this.$router.push("/production/equipment");
			} else if(text == '排单生产') {
				this.$router.push("/production/orderProduction");
			} else if(text == '发货申请') {
				this.$router.push("/shipments/list");
			} else if(text == '采购申请') {
				this.$router.push("/purchase/list");
			} else {
				this.$router.push(text.path);
			}
		},
		async announcementChange() {
			var res = await this.$API.announcement.announcement.list.get();
			this.announcementList = res.data.rows
		},
	}
}
</script>
<style scoped lang="scss">
::v-deep .el-table th {
	background-color: #F6F8F9 !important;
}
.oneBox {
	display: flex;
	align-items: center;
	.box {
		width: 70px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		margin-right: 10px;
		img {
			width: 40px;
			height: 40px;
			display: block;
			margin-bottom: 10px;
		}
		text-align: center;
	}
}
.box1 {
	//width: 50%;
	display: flex;
	align-items: center;
	border-radius: 14px;
	cursor: pointer;
	background: #f0f0f0;
	justify-content: center;
	text-align: center;
	width: 12%;
	margin-right: 10px;

	.title {
		font-size: 14px;
		margin: 0;
		color: #1a1a1a;
	}
	.value {
		font-size: 26px;
		margin-bottom: 10px;
	}
	padding: 20px 0;
}


.card-header {
	display: flex;
	align-items: center;
	position: relative;
}

.card-row {
	.el-card-row {
		width: 99.5%;
		height: 100%;
		box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	}
	margin-bottom: 15px;

}

.widgets-home {
	display: flex;
	flex-direction: row;
	flex: 1;
	height: 100%;
}

.widgets-content {
	flex: 1;
	overflow: auto;
	overflow-x: hidden;
	padding: 15px 15px;
}

.widgets-aside {
	width: 360px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	position: relative;
	overflow: auto;
}

.widgets-aside-title {
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.widgets-aside-title i {
	margin-right: 10px;
	font-size: 18px;
}

.widgets-aside-close {
	font-size: 18px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	cursor: pointer;
}

.widgets-aside-close:hover {
	background: rgba(180, 180, 180, 0.1);
}

.widgets-top {
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.widgets-top-title {
	font-size: 18px;
	font-weight: bold;
}

.widgets {
	transform-origin: top left;
	transition: transform .15s;
	display: flex;
}



.customizing .widgets-wrapper {
	margin-right: -360px
}

.customizing .widgets-wrapper .el-col {
	padding-bottom: 15px;
}



.customizing .widgets-wrapper .no-widgets {
	display: none;
}

.customizing .widgets-item {
	position: relative;
	margin-bottom: 15px;
}

.customize-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	cursor: move;
}

.customize-overlay label {
	background: var(--el-color-primary);
	color: #fff;
	height: 40px;
	padding: 0 30px;
	border-radius: 40px;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: move;
}

.customize-overlay label i {
	margin-right: 15px;
	font-size: 24px;
}

.customize-overlay .close {
	position: absolute;
	top: 15px;
	right: 15px;
}

.customize-overlay .close:focus,
.customize-overlay .close:hover {
	background: var(--el-button-hover-color);
}

.widgets-list {}

.widgets-list-item {
	display: flex;
	flex-direction: row;
	padding: 15px;
	align-items: center;
}

.widgets-list-item .item-logo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(180, 180, 180, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-right: 15px;
	color: #6a8bad;
}

.widgets-list-item .item-info {
	flex: 1;
}

.widgets-list-item .item-info h2 {
	font-size: 16px;
	font-weight: normal;
	cursor: default;
}

.widgets-list-item .item-info p {
	font-size: 12px;
	color: #999;
	cursor: default;
}

.widgets-list-item:hover {
	background: rgba(180, 180, 180, 0.1);
}

.widgets-wrapper .sortable-ghost {
	opacity: 0.5;
}

.selectLayout {
	width: 100%;
	display: flex;
}

.selectLayout-item {
	width: 60px;
	height: 60px;
	border: 2px solid var(--el-border-color-light);
	padding: 5px;
	cursor: pointer;
	margin-right: 15px;
}

.selectLayout-item span {
	display: block;
	background: var(--el-border-color-light);
	height: 46px;
}

.selectLayout-item.item02 span {
	height: 30px;
}

.selectLayout-item.item02 .el-col:nth-child(1) span {
	height: 14px;
	margin-bottom: 2px;
}

.selectLayout-item.item03 span {
	height: 14px;
	margin-bottom: 2px;
}

.selectLayout-item:hover {
	border-color: var(--el-color-primary);
}

.selectLayout-item.active {
	border-color: var(--el-color-primary);
}

.selectLayout-item.active span {
	background: var(--el-color-primary);
}


.dark {
	.widgets-aside {
		background: #2b2b2b;
	}

	.customize-overlay {
		background: rgba(43, 43, 43, 0.9);
	}
}

@media (max-width: 992px) {
	.customizing .widgets {
		transform: scale(1) !important;
	}

	.customizing .widgets-aside {
		width: 100%;
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
	}

	.customizing .widgets-wrapper {
		margin-right: 0;
	}
}
@media (max-width: 480px) {
	.card-row {
		.el-card-col {
			margin-bottom: 15px;
		}
		.el-card-row {
			width: 100%;
		}
		margin-bottom: 0px;
	}
}
</style>
